<template>
  <div class="notes-md-row">
    <div class="notes-md-editor">
      <textarea
        :value="modelValue"
        :placeholder="placeholder"
        :rows="16"
        @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
        @keydown="handleKeydown"
        @scroll="onTextareaScroll"
        ref="textareaRef"
        :style="`height: ${height}px; resize: none; width: 100%; font-size: 15px; line-height: 1.6; border: 1px solid #d9d9d9; border-radius: 4px; padding: 8px; box-sizing: border-box;`"
      />
    </div>
    <div class="notes-md-preview">
      <div
        ref="previewRef"
        class="notes-md-preview-scroll"
        :style="`background: #f6f8fa; padding: 16px; border-radius: 4px; min-height: 80px; height: ${height}px; overflow: auto;`"
        @scroll="onPreviewScroll"
      >
        <MarkdownRenderer :markdown="modelValue" :jumpToTime="() => {}" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import MarkdownRenderer from './MarkdownRenderer.vue'

const props = defineProps({
  modelValue: { type: String, required: true },
  placeholder: { type: String, default: '请输入内容...' },
  height: { type: Number, default: 400 }
})
const emit = defineEmits(['update:modelValue', 'tab', 'ctrlS'])
const textareaRef = ref<HTMLTextAreaElement | null>(null)
const previewRef = ref<HTMLElement | null>(null)
let activeScrollSource: 'textarea' | 'preview' | null = null
let scrollSyncTimeout: any = null

const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Tab') {
    e.preventDefault()
    const textarea = textareaRef.value
    if (textarea) {
      const start = textarea.selectionStart
      const end = textarea.selectionEnd
      const value = props.modelValue
      emit('update:modelValue', value.substring(0, start) + '\t' + value.substring(end))
      nextTick(() => {
        textarea.selectionStart = textarea.selectionEnd = start + 1
      })
    }
    emit('tab')
  } else if (e.ctrlKey && e.key.toLowerCase() === 's') {
    e.preventDefault()
    emit('ctrlS')
  }
}

const onTextareaScroll = () => {
  if (activeScrollSource === 'preview') return
  activeScrollSource = 'textarea'
  const textarea = textareaRef.value
  const preview = previewRef.value
  if (textarea && preview) {
    const percent = textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight)
    const previewScroll = (preview.scrollHeight - preview.clientHeight) * percent
    preview.scrollTop = previewScroll
  }
  clearTimeout(scrollSyncTimeout)
  scrollSyncTimeout = setTimeout(() => { activeScrollSource = null }, 100)
}

const onPreviewScroll = () => {
  if (activeScrollSource === 'textarea') return
  activeScrollSource = 'preview'
  const textarea = textareaRef.value
  const preview = previewRef.value
  if (textarea && preview) {
    const percent = preview.scrollTop / (preview.scrollHeight - preview.clientHeight)
    const textareaScroll = (textarea.scrollHeight - textarea.clientHeight) * percent
    textarea.scrollTop = textareaScroll
  }
  clearTimeout(scrollSyncTimeout)
  scrollSyncTimeout = setTimeout(() => { activeScrollSource = null }, 100)
}
</script>

<style scoped>
.notes-md-row {
  display: flex;
  gap: 24px;
}
.notes-md-editor {
  flex: 1;
}
.notes-md-preview {
  flex: 1;
  background: #fafbfc;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  min-height: 200px;
  max-height: 400px;
  overflow: auto;
  padding: 0 8px 8px 8px;
}
</style> 